<template>
  <view class="">
    <u-form-item :label="item.label">
      <u-button
        type="flex1"
        class=""
        :showborder="false"
        :textleft="true"
        @click="btntap()"
      >
        <view class="u-flex u-flex-between btntext">
          <view class="">{{ showvalue }}</view>
          <view class="icon u-flex u-flex-center">
            <u-icon name="arrow-down" size="20"></u-icon>
          </view>
        </view>
      </u-button>
    </u-form-item>
    <u-select
      :mask-close-able="false"
      v-model="show"
      :defaultValue="defaultValue"
      :list="options"
      @confirm="confirm"
    ></u-select>
  </view>
</template>

<script>
  export default {
    props: {
      value: {
        typeof: [String, Number],
        default: "0",
      },
      item: {
        typeof: Object,
        default: () => {
          return {
            value: "type",
            label: "分润模式",
            type: "select",
            option: [
              {
                value: "0",
                label: "普通分润",
              },
              {
                value: "1",
                label: "电费服务费模式",
              },
            ],
          };
        },
      },
      formdata: {
        typeof: Object,
        default: () => {
          return {};
        },
      },
      disabled: {
        typeof: Boolean,
        default: false,
      },
    },
    data() {
      return {
        show: false,
      };
    },
    mounted() {
      this.init();
    },
    computed: {
      formdatainput() {
        return this.$u.deepClone(this.formdata);
      },
      defaultValue() {
        let optioni = this.options.findIndex((e) => {
          return e.value == this.value;
        });
        if (optioni == -1) {
          return;
        }
        return [Number(optioni)];
      },
      options() {
        let r = this.item.option;
        if (typeof r == "function") {
          r = r(this.formdatainput);
        }
        return r;
      },
      showvalue() {
        let option = this.options.find((e) => {
          return e.value == this.value;
        });
        return option ? option.label : this.value || "请选择";
      },
    },
    methods: {
      async init() {
        if (this.item.defaultValue) {
          let option = this.options.find((e) => {
            return e.value == this.value;
          });
          if (!option) {
            this.$emit("input", this.item.defaultValue);
          }
        }
      },
      btntap() {
        if (this.disabled) {
          return;
        }
        this.show = !this.show;
      },
      confirm(e) {
        this.$emit("input", e[0].value);
      },
    },
  };
</script>

<style lang="scss">
  .btntext {
    flex: 1;
  }

  .icon {
    width: 88rpx;
    height: 88rpx;
  }
</style>
